<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>部门岗位</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <link rel="shortcut icon" href="favicon.ico">
  <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link rel="stylesheet" href="../tree/css/zTreeStyle/zTreeStyle.css" type="text/css"> 
  <link rel="stylesheet" type="text/css" href="../tree_grid/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../tree_grid/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="../tree_grid/demo.css">

  <script type="text/javascript" src="../tree_grid/jquery.min.js"></script>
  <script type="text/javascript" src="../tree_grid/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="../tree/js/jquery.ztree.core-3.5.js"></script>
  <script type="text/javascript" src="../mock/mock-min.js"></script>
  <script src="../js/bootstrap.min.js?v=3.3.6"></script>

  <!-- 自定义css、js -->
  <link rel="stylesheet" type="text/css" href="../css/labMgt/modal.css">
</head>

<body class="gray-bg">
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="zTreeDemoBackground left col-sm-2">
        <ul id="treeDemo" class="ztree"></ul>
      </div>

      <div class="col-sm-10">
        <div class="col-sm-12">
          <div id="accordion1" class="ibox float-e-margins">
            <div id="table1" class="ibox-content collapse in" aria-expanded="true">
              <table id="treegrid" title="数据字典" class="easyui-treegrid" style="width:100%;height:300px"
                data-options="
                  url: '',
                  method: 'get',
                  rownumbers: true,
                  idField: 'id',
                  treeField: 'name',
                  onContextMenu: onContextMenu
                ">
                <thead>
                  <tr>
                    <th data-options="field:'name'" width="50%">字典名称</th>
                    <th data-options="field:'code'" width="20%" align="center">字典代码</th>
                    <th data-options="field:'reason'" width="30%" align="center">说明</th>
                  </tr>
                </thead>
              </table>
              <div id="treegrid_menu" class="easyui-menu" style="width:120px;">
                <div data-toggle="modal" data-target="#addForm">新增节点</div>
                <div >新增子节点</div>
                <div class="menu-sep"></div>
                <div>向上移到</div>
                <div >向上移到</div>
                <div class="menu-sep"></div>
                <div>编辑节点</div>
                <div>删除节点</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- form 表单弹框 新增addForm -->
  <div class="modal fade" id="addForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title" id="myModalLabel">新增字典</h5>
        </div>
        <div class="modal-body">
          <form>
            <table class="form-table">
              <tbody>
                <tr>
                  <td class="title">字典名称：</td>
                  <td><input name="username" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">字典代码：</td>
                  <td><input name="code" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">上级字典：</td>
                  <td>
                    <select>
                      <option value="0"></option>
                      <option value="1"></option>
                    </select>
                    <b>*</b>
                  </td>
                </tr>
                <tr>
                  <td class="title">描述：</td>
                  <td><textarea name="note" type="text"></textarea></td>
                </tr>
              </tbody>
            </table>
          </form>          
        </div>
        <div class="modal-footer">
          <div class="text-center col-sm-12">
            <button class="btn btn-sm btn-info" type="submit">查 询</button>
            <button class="btn btn-sm btn-white" data-dismiss="modal">取 消</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增节点 start -->
  <div class="modal fade" id="addForm" role="dialog"
    aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title" id="myModalLabel">新增菜单</h5>
        </div>
        <div class="modal-body">
          <form>
            <table class="form-table">
              <tbody>
                <tr>
                  <td class="title">菜单名称：</td>
                  <td><input name="username" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">URL：</td>
                  <td><input name="url" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">图标：</td>
                  <td><input name="icon" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">类型：</td>
                  <td>
                    <select id="">
                      <option>请选择</option>
                      <option value="1">应用</option>
                      <option value="0"></option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="title">上级菜单：</td>
                  <td><input name="last" type="text"></td>
                </tr>
                <tr>
                  <td class="title">是否隐藏：</td>
                  <td>
                    <select id="">
                      <option>请选择</option>
                      <option value="1">是</option>
                      <option value="0">否</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="title">描述：</td>
                  <td><textarea name="note" type="text"></textarea></td>
                </tr>
              </tbody>
            </table>
          </form>          
        </div>
        <div class="modal-footer">
          <div class="text-center col-sm-12">
            <button class="btn btn-sm btn-info" type="submit">查 询</button>
            <button class="btn btn-sm btn-white" data-dismiss="modal">取 消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 新增节点 end -->

  <script type="text/javascript">
    var setting = {
      callback: {
        onExpand: zTreeOnExpand,
        onClick: zTreeOnClick,
      }
    };
    var zNodes =[
      { name:"父节点1 - 展开", open:true,
        children: [
          { name:"父节点11 - 折叠",open:true,
            children: [
              { name:"叶子节点111"},
              { name:"叶子节点112"},
              { name:"叶子节点113"},
              { name:"叶子节点114"}
            ]},
          { name:"父节点12 - 折叠",open:true,
            children: [
              { name:"叶子节点121"},
              { name:"叶子节点122"},
              { name:"叶子节点123"},
              { name:"叶子节点124"}
            ]},
          { name:"父节点13 - 没有子节点", isParent:true}
        ]},
      { name:"父节点2 - 折叠",open:true,
        children: [
          { name:"父节点21 - 展开", open:true,
            children: [
              { name:"叶子节点211"},
              { name:"叶子节点212"},
              { name:"叶子节点213"},
              { name:"叶子节点214"}
            ]},
          { name:"父节点22 - 折叠",open:true,
            children: [
              { name:"叶子节点221"},
              { name:"叶子节点222"},
              { name:"叶子节点223"},
              { name:"叶子节点224"}
            ]},
          { name:"父节点23 - 折叠",open:true,
            children: [
              { name:"叶子节点231"},
              { name:"叶子节点232"},
              { name:"叶子节点233"},
              { name:"叶子节点234"}
            ]}
        ]},
      { name:"父节点3 - 没有子节点", isParent:true}
    ];

    var data  = [{
      id:1,
      name:"起重机指挥",
      url:"/",
      icon:"",
      type:"应用",
      children:[{
        id:2,
        name:"项目经理",
        url:"/videoMonitor",
        icon:"",
        type:"应用",
        children:[{
          id:21,
          name:"项目总工",
          size:"是",
          url:"/workerInfoDetail",
          date:"01/13/2010",
        }, {
          id:211,
          name:"人员新增",
          url:"/workerInfoDetail",
          date:"01/13/2010",
        }]
      }]
    }];

    $(document).ready(function(){
      $('#treegrid').treegrid("loadData",data);
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

    function onContextMenu(e,row){
      if (row) {
        e.preventDefault();
        $(this).treegrid('select', row.id);
        $('#treegrid_menu').menu('show',{
          left: e.pageX,
          top: e.pageY
        });                
      }
    }

    // click触发事件
    function zTreeOnExpand(event, treeId, treeNode) {
      
    }

    // click触发事件  加载具体数据
    function zTreeOnClick(event, treeId, treeNode) {
      
    }
  </script>

</body>

</html>